<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=0">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>添加房型</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="static/bootstrap-3.4.1/css/bootstrap.css">
    <link rel="stylesheet" href="static/bootstrap-3.4.1/css/bootoast.css">
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="static/bootstrap-3.4.1/js/jquery-3.6.0.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="static/bootstrap-3.4.1/js/bootstrap.js"></script>
    <script src="./static/bootstrap-3.4.1/js/bootoast.js"></script>
    <script src="./static/js/URLUtil.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        main .myform {
            width: 30%;
            margin-left: 40px;
        }

        main p {
            display: block;
            width: 100%;
            /* position: absolute;
            bottom: 20px; */
            text-align: center;
            margin: 20px 0;
        }

        .footer {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 10px;
            color: #666;
            text-align: center;
        }
    </style>
    <script>
        $(function () {
            loadType();
        });
        function loadType() {
            let id = getParam("id");
            $.getJSON("/type/selectOne",{"id":id},function(type){
                $("#id").val(type.id);
                $("#tName").val(type.tName);
                $("#roomCount").val(type.roomCount);
            })
        }
        function save() {
            let id = $("#id").val();
            let tNname = $("#tName").val();
            let roomCount = $("#roomCount").val();
            $.post("/type/update",{"id":id,"rCount":roomCount},function(data){
                if(data){
                    bootoast({
                        message:"修改成功！",
                        position:"top",
                        timeout:2,
                        type:"success"
                    })

                }else{
                    bootoast({
                        message:"修改失败！",
                        position:"top",
                        timeout:2,
                        type:"danger"
                    })
                }
                setTimeout(function(){
                    location.herf="./type-list.html";
                },2000)
            })
        }

    </script>
</head>

<body>
<div class="container-fluid my-container">
    <main>
        <!-- 路径导航 -->
        <ol class="breadcrumb" style="margin-top:5px;">
            <li><a href="#">主页</a></li>
            <li><a href="#">类型管理</a></li>
            <li class="active">添加类型</li>
        </ol>
        <!-- 表单 -->
        <div class="myform">
            <form id="myForm">
                <input type="number" id="id" hidden>
                <div class="form-group">
                    <label for="tName">类型名称：</label>
                    <input type="text" class="form-control" name="tName" id="tName" placeholder="请输入类型名称">
                </div>
                <div class="form-group">
                    <label for="roomCount">房间数量：</label>
                   <input type="number" id="roomCount" class="form-control" name="roomCount" placeholder="请输入房间数量">
                </div>

                <button type="button" class="btn btn-success" onclick="save()">保存</button>
            </form>

        </div>
    </main>
    <!-- 尾部 -->
    <div class="footer">技术支持:西安粤嵌信息科技有限公司</div>
</div>
<script>

</script>
</body>
</html>